<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org"
	   xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title>
		用户信息管理
	</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/css/x-admin.css}" media="all">
</head>
<body  class="layui-bg-gray">
<div class="x-nav">
	<a><span class="hidden-phone" id="username" sec:authentication="name"></span> 您好！您的 <cite>的个人信息</cite></a>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="jsonuserdata"  >

	<div class="nav">
		<form class="layui-form">

			<div class="layui-form-item" style="display:none">
				<label  class="layui-form-label">注册ID </label>
				<div class="layui-input-inline">
					<input type="text" id="id" name="id" th:value="${user.id}" readonly="readonly"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_username" class="layui-form-label"> <span class="x-red">*</span>昵称 </label>
				<div class="layui-input-inline">
					<input type="text" id="L_username" name="username" th:value="${user.userName}" readonly="readonly"
						   autocomplete="on" class="layui-input" disabled=true>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span class="x-red">*</span>邮箱 </label>
				<div class="layui-input-inline">
					<input type="text" id="L_email" name="email" required lay-verify="email" th:value="${user.email}"
						   autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_phone" class="layui-form-label"> <span class="x-red">*</span>电话</label>
				<div class="layui-input-inline">
					<input type="text" id="L_phone" name="phone" required lay-verify="phone" th:value="${user.phone}"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label  class="layui-form-label"> <span class="x-red">*</span>状态 </label>
				<div class="layui-input-inline">
					<input type="text"  name="Active" th:value="${user.active}"
						   autocomplete="on" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label  class="layui-form-label"> <span class="x-red">*</span>注册日期 </label>
				<div class="layui-input-inline">
					<input type="text"  name="createdate2" th:value="${#dates.format(user.createDate, 'yyyy-MM-dd')}" readonly="readonly"
						   autocomplete="on" class="layui-input" disabled=true>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button  class="layui-btn" lay-filter="add" lay-submit=""> 确认更新 </button>
			</div>
		</form>
	</div>
	<div class="cont">
		<form class="layui-form"  id="layui-form-up">

			<div class="layui-form-item" style="display:none">
				<label  class="layui-form-label">注册ID </label>
				<div class="layui-input-inline">
					<input type="text" id="id" name="id" th:value="${user.id}" readonly="readonly"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_passLod" class="layui-form-label"> <span class="x-red">*</span>原密码 </label>
				<div class="layui-input-inline">
					<input type="password" id="L_passLod" name="lodPwd" required lay-verify="pass"
						   autocomplete="off" class="layui-input" placeholder="请输入原密码">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_pass" class="layui-form-label"> <span class="x-red">*</span>新密码 </label>
				<div class="layui-input-inline">
					<input type="password" id="L_pass" name="newPwd" required lay-verify="pass"
						   autocomplete="off" class="layui-input" placeholder="6-16个字符">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> <span class="x-red">*</span>确认密码 </label>
				<div class="layui-input-inline">
					<input type="password" id="L_repass" name="rnewPwd" required lay-verify="repass"
						   autocomplete="off" class="layui-input"  placeholder="6-16个字符">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button  class="layui-btn" lay-filter="updatePwd" lay-submit=""> 修改密码 </button>
			</div>
		</form>
	</div>
</div>
</div>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8">
</script>
<script th:src="@{/js/x-layui.js}" charset="utf-8">
</script>
<script>
	layui.use(['form','layer'], function(){
		$ = layui.jquery;
		var form = layui.form()
				,layer = layui.layer;
		//自定义验证规则
		form.verify({
			nikename: function(value){
				if(value.length < 5){
					return '昵称至少5个字符';
				}
			}
			,pass: [/(.+){6,16}$/, '密码必须6-16位']
			,repass: function(value){
				if($('#L_pass').val()!=$('#L_repass').val()){
					return '两次密码不一致';
				}
			}
		});

		//监听提交
		form.on('submit(add)', function(data){
			//发异步，把数据提交给后台
			var info;
			$.ajax({
				url: '/javayh/userUpdate',
				type: 'put',
				data: $("#jsonuserdata form").serialize(),//jquery的序列化表单
				async: false,//默认true 即异步  请求未结束 ajax后面的内容均会执行   但是false下，只有得到success执行成功后面的才会继续判断
				success:function(result){
					info=result.code;
				}
			});//ajax结束
			if(info==1){
				layer.msg('更新成功', {icon: 6});
			}else{
				layer.msg('后台数据校验失败,请重新填写', {icon: 7});
			}//提交判断结束

			return false;//必须返回
		});//监听结束

		form.on('submit(updatePwd)', function(data){
			//发异步，把数据提交给后台
			var info;
			$.ajax({
				url: '/javayh/updatePwd',
				type: 'put',
				data: $("#jsonuserdata form").serialize(),//jquery的序列化表单
				async: false,//默认true 即异步  请求未结束 ajax后面的内容均会执行   但是false下，只有得到success执行成功后面的才会继续判断
				success:function(result){
					info=result.code;
				}
			});//ajax结束
			if(info==1){
				layer.msg('密码更新成功,为确保安全请重新登录', {icon: 6});
				$("#layui-form-up")[0].reset();
			}else{
				layer.msg('原密码输入有误,请重新输入', {icon: 7});
				$("#layui-form-up")[0].reset();
			}//提交判断结束

			return false;//必须返回
		});//监听结束
	});//表单提交结束
</script>

<style type="text/css">

	.cont{
		float:left;
		width: 48%;
		margin: 10px;
		height: auto;
	}
	.nav{
		float:left;
		width: 48%;
		margin: 10px;
		height: auto;
	}
</style>
</body>
</html>